<template>
  <div class="grid-member-update">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>网格成员信息更新</span>
        </div>
      </template>
      <el-form :model="gridMember" label-width="120px">
        <el-form-item label="ID">
          <el-input v-model="gridMember.gmId" disabled></el-input>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input v-model="gridMember.tel"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="gridMember.password"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="gridMember.gmName"></el-input>
        </el-form-item>
        <el-form-item label="编码">
          <el-input v-model="gridMember.gmCode"></el-input>
        </el-form-item>
        <el-form-item label="省份">
          <el-select
              v-model="gridMember.provinceId"
              @change="changeProvince"
              placeholder="请选择省份"
              style="width: 100%"
          >
            <el-option
                v-for="province in provinceArr"
                :key="province.provinceId"
                :label="province.provinceName"
                :value="province.provinceId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市">
          <el-select
              v-model="gridMember.cityId"
              placeholder="请选择城市"
              style="width: 100%"
          >
            <el-option
                v-for="city in cityArr"
                :key="city.cityId"
                :label="city.cityName"
                :value="city.cityId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="gridMember.state" type="number"></el-input>
        </el-form-item>
      </el-form>
      <div class="button-group">
        <el-button type="primary" @click="goBack">返回</el-button>
        <el-button type="success" @click="confirmUpdate">确认</el-button>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage } from 'element-plus';

const router = useRouter();
const route = useRoute();

// 定义网格成员信息的响应式对象
const gridMember = ref({
  gmId: null,
  gmName: '',
  gmCode: '',
  password: '',
  provinceId: null,
  cityId: null,
  tel: '',
  state: null,
  remarks: ''
});

// 定义省份和城市的下拉框数据
const provinceArr = ref([]);
const cityArr = ref([]);

// 获取 URL 中的 gmId 参数
onMounted(() => {
  const gmId = route.query.gmId;
  if (gmId) {
    gridMember.value.gmId = gmId;
    fetchGridMemberInfo(gmId);
    listGridProvinceAll(); // 初始化省份列表
  }
});

// 根据 gmId 获取网格成员信息
const fetchGridMemberInfo = async (gmId) => {
  try {
    const response = await axios.get(`gridMember/getById/${gmId}`);
    gridMember.value = response.data;
    gridMember.value.provinceId=null;
    gridMember.value.cityId=null;
    if (gridMember.value.provinceId) {
      listGridCityByProvinceId(gridMember.value.provinceId); // 根据省份 ID 获取城市列表
    }
  } catch (error) {
    console.error("获取网格成员信息失败:", error);
    ElMessage.error("获取网格成员信息失败，请稍后重试！");
  }
};

// 初始化省份列表
const listGridProvinceAll = () => {
  axios.post("gridProvince/listGridProvinceAll")
      .then((response) => {
        provinceArr.value = response.data;
        provinceArr.value.unshift({
          provinceId: null,
          provinceName: "-- 请选择省份 --"
        });
      })
      .catch((error) => {
        console.error("获取省份列表失败:", error);
      });
};

// 根据省份 ID 获取城市列表
const listGridCityByProvinceId = (provinceId) => {
  axios.post("gridCity/listGridCityByProvinceId", { provinceId: provinceId })
      .then((response) => {
        cityArr.value = response.data;
        cityArr.value.unshift({
          cityId: null,
          cityName: "-- 请选择城市 --"
        });
      })
      .catch((error) => {
        console.error("获取城市列表失败:", error);
      });
};

// 省份下拉框变化时更新城市列表
const changeProvince = () => {
  listGridCityByProvinceId(gridMember.value.provinceId);
};

// 返回按钮的逻辑
const goBack = () => {
  router.go(-1);
};

// 确认按钮的逻辑
const confirmUpdate = () => {
  const requestData = {
    gmId: gridMember.value.gmId,
    gmName: gridMember.value.gmName,
    gmCode: gridMember.value.gmCode,
    password: gridMember.value.password,
    provinceId: gridMember.value.provinceId,
    cityId: gridMember.value.cityId,
    tel: gridMember.value.tel,
    state: gridMember.value.state,
    remarks: gridMember.value.remarks
  };

  axios.post("/gridMember/update", requestData)
      .then((response) => {
        console.log("更新成功:", response.data);
        ElMessage.success("网格成员信息已成功更新！");
        router.go(-1);
      })
      .catch((error) => {
        console.error("更新失败:", error);
        ElMessage.error("网格成员信息更新失败，请稍后重试！");
      });
};
</script>

<style scoped>
.grid-member-update {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button-group {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>